<template>
   <div class="footer">
       <div class="fullcheck">
           <input type="checkbox" id="fullbox" :checked="allstate" @change="allState">
          
           <label for="fullbox" class="qx"> <span>全选</span></label>
       </div>
      
       <div>合计 {{prices}} </div>

       <button type="button" class="heji">合计</button>
   </div>
</template>

<script>
export default {
    props:{
        prices:{
            default : 0,
            type: Number
        },
        allstate:{
            default:false,
            type:Boolean
        }
    },
    data:function(){
        return {

        }
    },
    methods:{
        allState(e){
            const state = e.target.checked
            this.$emit('all-state',{state})
        }
    }
}
</script>

<style>
     .footer{
        position: fixed;
        height: 50px;
        width: 100%;
        bottom: 0;
        left: 0;
        text-align: center;
        font-size: 20px;
        display: flex;
        justify-content: space-between;
        line-height: 50px;
        background-color: wheat;
        color: black;
        box-shadow: 5px 5px 5px ;
     
    }
    .qx{
        font-size: 12px;
    }
    .fullcheck{
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
       margin-left: 5px;
    }
    button{
        width: 120px;
        margin: 10px;
        border-radius: 12.5px;
        background-color: blueviolet;
    }
</style>